<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">大学生创新创业成果转化服务平台</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>

<!--      <el-form-item prop="nickname">
        <el-input v-model="registerForm.nickname" type="text" auto-complete="off" placeholder="企业名称">
        <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>-->

      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          auto-complete="off"
          placeholder="确认密码"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="registerForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleRegister"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
        </div>
      </el-form-item>
      <el-form-item prop="remark">
      <el-radio-group v-model="registerForm.remark" >
        <el-radio :label="1">企业用户</el-radio>
<!--        <el-radio :label="2">个人用户</el-radio>-->
      </el-radio-group>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button

          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister"
        >
          <span >注 册</span>

        </el-button>
        <!--<div style="float: right;">
          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
        </div>-->
      </el-form-item>
      <div>
        <p style="font-size:15px;text-align: center">2023 © 渤海大学创新创业学院</p>
      </div>
    </el-form>

    <!-- 企业信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" :showClose="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="enterpriseNumber">
          <el-input v-model="form.enterpriseNumber" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        <!--<el-form-item label="企业营业执照" prop="businessLicense">
          <el-input v-model="form.businessLicense" placeholder="请输入企业营业执照"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="营业执照注册地" prop="licenseAddress">
          <el-input v-model="form.licenseAddress" placeholder="请输入营业执照注册地"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="企业地址" prop="enterpriseAddress">
          <el-input v-model="form.enterpriseAddress" placeholder="请输入企业地址"  style="width: 100%"/>
        </el-form-item>-->
        <el-form-item label="注册人姓名" prop="registrationName">
          <el-input v-model="form.registrationName" placeholder="请输入注册人姓名"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="注册人手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="注册人邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="注册人身份证号" prop="registrationNumber">
          <el-input v-model="form.registrationNumber" placeholder="请输入注册人身份证号"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="备注" prop="note2">
          <el-input v-model="form.note2" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <!--<el-form-item label="注册时间" prop="registrationTime">
          <el-date-picker clearable
                          disabled="true"
                          v-model="form.registrationTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"
                          placeholder="请选择注册时间">
          </el-date-picker>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!--<el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>

    <!-- 个人信息对话框 -->
    <el-dialog :title="person.title" :visible.sync="person.open" width="500px" append-to-body :close-on-click-modal="false" :showClose="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="注册人姓名" prop="registrationName">
          <el-input v-model="form.registrationName" placeholder="请输入注册人姓名"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="注册人手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="注册人邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="注册人身份证号" prop="registrationNumber">
          <el-input v-model="form.registrationNumber" placeholder="请输入注册人身份证号"  style="width: 100%"/>
        </el-form-item>
        <el-form-item label="备注" prop="note2">
          <el-input v-model="form.note2" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <!--<el-form-item label="注册时间" prop="registrationTime">
          <el-date-picker clearable
                          disabled="true"
                          v-model="form.registrationTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"
                          placeholder="请选择注册时间">
          </el-date-picker>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="personForm">确 定</el-button>
        <!--<el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>

    <!--  底部  -->
    <!--<div class="el-register-footer">
      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
    </div>-->
  </div>
</template>

<script>
import { getCodeImg, register,getInfo } from "@/api/login";
import { getUserName,addUserRole,getUserId,updateNick } from "@/api/system/user";
import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/cjl/baseinfo";
export default {
  name: "Register",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
        this.open = false;
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: "",
        remark: 1,
      },
      form1: {
        username: "",
        password: "",
        nickName: "",
      },
      form:{
        id: null,
        userId: null,
        nickName: null,
        sex: null,
        phone: null,
        email: null,
        idNumber: null,
        userType: null,
        college: null,
        major: null,
        studentNumber: null,
        grade: null,
        cardNumber: null,
        openingBank: null,
        bankAddress: null,
        jobNumber: null,
        professionalTitl: null,
        enterpriseName: null,
        enterpriseNumber: null,
        corporateName: null,
        corporateEmail: null,
        corporatePhone: null,
        corporateNumber: null,
        businessLicense: null,
        licenseAddress: null,
        enterpriseAddress: null,
        registrationTime:this.getNowTime(),
        registrationName: null,
        registrationNumber: null,
        auditState: null,
        auditTime: null,
        auditName: null,
        auditNumber: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 个人查询参数
      person:{
      // 是否显示弹出层（用户查询）
      open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
      // 是否显示弹出层
      open: false,
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      rules: {
        enterpriseName: [
          { required: true, trigger: "blur", message: "企业名称不能为空" },
          { pattern: /^[\u4e00-\u9fa5]+$/, message: '企业名称必须为中文', trigger: 'blur' }
        ],
        enterpriseNumber: [
          { required: true, trigger: "blur", message: "统一社会信用代码不能为空" },
          /*{
            pattern: /^([0-9ABCDEFGHJKLMNPQRTUWXY]{2})(\d{6})([0-9ABCDEFGHJKLMNPQRTUWXY]{10})$/,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }*/
        ],
        registrationName: [
          { required: true, trigger: "blur", message: "注册人姓名不能为空" },
        ],
        registrationNumber: [{ required: true, trigger: "change", message: "注册人身份证号不能为空" },
          {
            pattern: /^(^\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, trigger: "blur", message: "手机号码不能为空" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        email: [{ required: true, trigger: "change", message: "邮箱不能为空" },
          {type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}]
      },
      loading: false,
      captchaEnabled: true
    };
  },
  created() {
    this.getCode();
    this.getNowTime();
  },
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        nickName: null,
        sex: null,
        phone: null,
        email: null,
        idNumber: null,
        userType: null,
        college: null,
        major: null,
        studentNumber: null,
        grade: null,
        cardNumber: null,
        openingBank: null,
        bankAddress: null,
        jobNumber: null,
        professionalTitl: null,
        enterpriseName: null,
        enterpriseNumber: null,
        corporateName: null,
        corporateEmail: null,
        corporatePhone: null,
        corporateNumber: null,
        businessLicense: null,
        licenseAddress: null,
        enterpriseAddress: null,
        registrationTime: null,
        registrationName: null,
        registrationNumber: null,
        auditState: null,
        auditTime: null,
        auditName: null,
        auditNumber: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          // alert(this.registerForm.nickname);
          register(this.registerForm).then(res => {
            this.reset();
            if(this.registerForm.remark==2){
              this.person.open=true;
              this.form.registrationTime=this.getNowTime();
              this.person.title = "添加个人基本信息";
            }else{
              this.open = true;
              this.form.registrationTime=this.getNowTime();
              this.title = "添加企业基本信息";
            }
          })
        }
      });
    },
    //企业提交信息
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          const username = this.registerForm.username;
          getUserName(username).then(response => {
              const Id = response;
              this.form.userId=Id;
              this.form.userType=1;
              this.form.auditState=1;
              addBaseinfo(this.form).then(response => {
                //有问题
                /*addUserRole(this.form.userId,13).then(response => {
                });*/
                this.$alert("<font color='red'>恭喜你，您的账号 "+ username+ " 注册成功！</font>", '系统提示', {
                  dangerouslyUseHTMLString: true,
                  type: 'success'
                }).then(() => {
                  this.$router.push("/login1");
                }).catch(() => {});
                this.open = false;
              });
            /*getUserId(Id).then(res => {
              this.form1 = res.data;
              this.form1.nickName=this.form.registrationName;
              updateNick(this.form1).then(re => {
              })
            });*/
            }
          );
        }
      });
    },
    //个人提交信息
    personForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          const username = this.registerForm.username;
          getUserName(username).then(response => {
              const Id = response;
              this.form.userId=Id;
              this.form.userType=2;
              this.form.auditState=1;
              addBaseinfo(this.form).then(response => {
/*                addUserRole(this.form.userId,14).then(response => {

                });*/
                this.$alert("<font color='red'>恭喜你，您的账号 "+ username+ " 注册成功！</font>", '系统提示', {
                  dangerouslyUseHTMLString: true,
                  type: 'success'
                }).then(() => {
                  this.$router.push("/login1");
                }).catch(() => {});
                this.open = false;
              });
              /*getUserId(Id).then(res => {
                this.form1 = res.data;
                this.form1.nickName=this.form.registrationName;
                updateNick(this.form1).then(re => {
                })
              });*/
            }
          );
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
